<template>
  <div class="w-fit h-fit opacity-30 hover:opacity-80">
    <OhVueIcon
      class="hover:cursor-pointer"
      :name="`${isDark ? 'hi-solid-moon' : 'hi-solid-sun'}`"
      @click="onClickColorMode"
      scale="1.3"
    ></OhVueIcon>
  </div>
</template>

<script lang="ts" setup>
import { OhVueIcon } from "oh-vue-icons";
const isDark = useDark();
const colorMode = useColorMode();
const colorCookie = useCookie("color");
// 如果这里cookie没有定义，则刷新cookie值
if (colorCookie.value == undefined || colorCookie == null) {
  colorCookie.value = "light";
}

// 基于Cookie值切换
if (colorCookie.value == "light") {
  isDark.value = false;
  colorMode.value = "light";
  colorMode.preference = "light";
} else {
  isDark.value = true;
  colorMode.value = "dark";
  colorMode.preference = "dark";
}

const onClickColorMode = () => {
  colorCookie.value = colorCookie.value == "dark" ? "light" : "dark";
  isDark.value = !isDark.value;
  colorMode.preference = colorMode.preference == "dark" ? "light" : "dark";
};

onMounted(async () => {
  // await nextTick();
  // 基于Cookie值切换
  if (colorCookie.value == "light") {
    isDark.value = false;
    colorMode.value = "light";
    colorMode.preference = "light";
  } else {
    isDark.value = true;
    colorMode.value = "dark";
    colorMode.preference = "dark";
  }
});
</script>

<style></style>
